<template>
    <div>
        <div class="examAnaly_nav">
            <BreadCrumb></BreadCrumb>
        </div>
        <div class="examAnaly_tittle">
            成绩分析
        </div>
        <div class="input">
            <el-row>
                <el-col :span="7" :offset="5">
                    <el-input v-model="stu_id" placeholder="请输入学号"></el-input>
                </el-col>
                <el-col :span="7" :offset="1">
                    <el-button @click="getExamAnaly">成绩分析</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="result_show">
            <div class="stu_name" v-show="flag">
                学生姓名：{{ stu_name }}
            </div>
            <div class="echarts">
                <el-row>
                    <el-col :span="8">
                        <div id="exam_anlay" style="width: 100%; height: 100%"></div>
                    </el-col>
                    <el-col :span="8">
                        <div id="chinese_anlay" style="width: 100%; height: 100%"></div>
                    </el-col>
                    <el-col :span="8">
                        <div id="math_anlay" style="width: 100%; height: 100%"></div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <div id="english_anlay" style="width: 100%; height: 100%"></div>
                    </el-col>
                    <el-col :span="8">
                        <div id="lizong_anlay" style="width: 100%; height: 100%"></div>
                    </el-col>
                    <el-col :span="8">
                        <div id="wenzong_anlay" style="width: 100%; height: 100%"></div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import { req_find_enter, req_find_mid, req_find_end } from '@/api/exam.js'
import { examCharts, lineCharts } from '@/utils/charts.js'
export default {
    data() {
        return {
            stu_id: '',
            stu_name: '',//学生姓名
            flag: false
        }
    },
    mounted() {
        // this.getExam_anlay();
        // this.getChinese_anlay()
    },
    methods: {
        //点击查询 获取 入学、期中、期末的成绩
        async getExamAnaly() {
            let enter_result = await req_find_enter(this.stu_id)
            let mid_result = await req_find_mid(this.stu_id)
            let end_result = await req_find_end(this.stu_id)
            console.log(enter_result, mid_result, end_result)
            // console.log(enter_result.data[0])

            //学生姓名
            this.stu_name = enter_result.data[0].stu_name

            //第一张图 成绩总体分析
            // data: ["语文", "英语", "数学", "理综", "文综"],
            //配置第一张图，入学、期中、期末所有考试的成绩
            //containerId 容器id  enterData,midData,endData  入学、期中、期末考试成绩 数组形式
            //重点在于得到正确顺序的数组传过去
            let arr1 = ["chinese", "math", "english", "lizong", "wenzong"]//数组的正确顺序
            let enterData = [];//入学成绩正确顺序数组的初始值
            let midData = [];//期中
            let endData = [];//期末
            //需要数组 resultArr  正确顺序的元素要放的数组 
            //需要对象 - 成绩 - exam (exam代表入学、期中、期末的成绩)
            //需要正确顺序的key值 - arritem 根据它一次加入空数组 resultArr 最后形成争取顺序的数组
            function getGrade(resultArr, exam, arritem) {
                for (let key in exam) {
                    if (key == arritem) {
                        resultArr.push(exam[key])
                    }
                }
            }
            for (let i = 0; i < arr1.length; i++) {
                getGrade(enterData, enter_result.data[0], arr1[i]);//入学
                getGrade(midData, mid_result.data[0], arr1[i]);//期中
                getGrade(endData, end_result.data[0], arr1[i]);//期末
            }
            //生成叠层图
            //参数 1、this 因为模块为js文件它this指向与vue组件的this指向不同 $echarts封装在Vue原型上的
            //参数 2、生成图表 的容器的id ；3、4、5、代表正确顺序的 入学、期中、期末成绩 数组
            examCharts(this, "exam_anlay", enterData, midData, endData)

            //生成折线图
            //参数：1、this；2、图表容器；3、科目；4、科目成绩
            // lineCharts(that,containerId,subject,gradeSubject)
            // lineCharts(this,"chinese_anlay","chinese",arr2)
            // enter_result.data[0]['chinese']
            //参数1、this；2、容器id；3、科目名字；4、科目；5、入学成绩、6、期中成绩、7、期末成绩
            function score(that, containerId, subject, enterExam, midExam, endExam, subjectEnglish) {
                let scoreArr = [];
                scoreArr.push(enterExam[subjectEnglish])
                scoreArr.push(midExam[subjectEnglish])
                scoreArr.push(endExam[subjectEnglish])
                lineCharts(that, containerId, subject, scoreArr)
            }
            //参数1、this；2、容器id；3、科目；4、入学成绩；5、期中成绩、6、期末成绩、7、科目名字
            //语文成绩echarts
            score(this, 'chinese_anlay', '语文', enter_result.data[0], mid_result.data[0], end_result.data[0], 'chinese')
            //数学成绩echarts
            score(this, 'math_anlay', '数学', enter_result.data[0], mid_result.data[0], end_result.data[0], 'math')
            //英语成绩echarts
            score(this, 'english_anlay', '英语', enter_result.data[0], mid_result.data[0], end_result.data[0], 'english')
            //理综成绩echarts
            score(this, 'lizong_anlay', '理综', enter_result.data[0], mid_result.data[0], end_result.data[0], 'lizong')
            //文综成绩echarts
            score(this, 'wenzong_anlay', '文综', enter_result.data[0], mid_result.data[0], end_result.data[0], 'wenzong')
            //设置显示stu_name
            this.flag = true
        }
    }
}
</script>

<style lang="scss" scoped>
div {
    .examAnaly_nav {
        height: 30px;
    }

    .examAnaly_tittle {
        height: 30px;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        margin: 10px 0;
    }

    .input {
        height: 50px;
    }

    .stu_name {
        height: 30px;
        font-size: 16px;
        font-weight: 700;
        margin: 10px 0;
    }

    .echarts {
        height: 300px;
    }
}
</style>